<!DOCTYPE html>

<html>
    <head>
        <title>mcrypt加密和解密</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .words{font-size: 24px;color:background; border: 1px solid background;margin:25px auto;}
        </style>
        <script src="/phptest/public/jquery-2.2.3.min.js"></script>
    </head>
    <body>
        <div id="encrypt">      
            明文：<input type="text" name="data" value=""><br>
                密钥：<input type="text" name="key" value=""><br>
                cipher:
                <select id="cipher" name="cipher">
                    <option value="">——请选择——</option>
                    <option value="tripledes">tripledes</option>
                </select><br>
                mode:
                <select id="mode" name="mode">
                    <option value="">——请选择——</option>
                    <option value="cfb">cfb</option>
                </select><br>
                <button id="encrypt1">提交</button>
                <div id="keywords" class="words"></div>          
        </div>
        <div id="decrypt">      
                密文：<input type="text" name="decrypt"><br>
                密钥：<input type="text" name="key"><br>
                cipher:
                <select id="cipher" name="cipher">
                    <option value="">——请选择——</option>
                    <option value="tripledes">tripledes</option>
                </select><br>
                mode:
                <select id="mode" name="mode">
                    <option value="">——请选择——</option>
                    <option value="cfb">cfb</option>
                </select><br>
                <button id="decrypt1">提交</button>
                <div id="words" class="words"></div>          
        </div>
    </body>
</html>
<script type="text/javascript">
    /*
     * Ajax Post数据时加号变空格的解决办法
　　采用Ajax传递数据时，通常会将数据整理为data="var1=abc&var2=def"。而当数据中存在加号(+)或是连接符(&)时，服务器端接收数据时会有部分数据丢失现象。

　　分析一下Ajax传递数据的格式与Javascript的语法不难发现：
　　1. "+"号：JavaScript解析为字符串连接符，所以服务器端接收数据时"+"会丢失。
　　2. "&"：JavaScript解析为变量连接符，所以服务器端接收数据时&符号以后的数据都会丢失。

　　解决办法也相当简单，只需要为+与&符号编码即可：

    //使用post方式发送
    function doRequestUsingPOST()
    {
        createXMLHttpRequest();
        var retCode = document.getElementById("retCode").value;
        var data = document.getElementById("data").value;
        data = data.replace(/\+/g, "%2B");
        data = data.replace(/\&/g, "%26");
        var queryString = "retCode=" + retCode + "&data=" + data;
        var url = "backSealServlet"; //使用URL向后台传值
        xmlHttp.open("POST",url,false);
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send(queryString);
    }
    【推荐】在 javascript 中加入    
    function URLencode(sStr)   
    {  
        return escape(sStr).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');  
    }  
    对字符串进行处理.如： 
    var str=URLencode("abc+");  
    或者： 
    dst_fname=dst_fname.replaceAll("\\+","%20");  
     */ 
    function URLencode(sStr){  
    return escape(sStr).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');  
    }
    
    
    $("#encrypt1").click(function(){
        var data = $("input[name='data']").val();
        data = URLencode(data);
        var key = $("#encrypt input[name='key']").val();
        key = URLencode(key);
        var cipher = $("#encrypt select#cipher option:selected").val();
        var mode = $("#encrypt select#mode option:selected").val();
        var dataString = 'data='+ data + '&key=' + key + '&cipher=' +cipher+ '&mode= '+mode; 
        $.ajax({ 
            type: "post", 
            url: "main.php?action=encrypt", 
            data: dataString, 
            success: function(data) { 
                $("#keywords").html(data);
            } 
        }); 
    });
    $("#decrypt1").click(function(){
        var decrypt = $("input[name='decrypt']").val();
        decrypt = URLencode(decrypt);
        var key = $("#decrypt input[name='key']").val();
        key = URLencode(key);
        var cipher = $("#decrypt select#cipher option:selected").val();
        var mode = $("#decrypt select#mode option:selected").val();
        var dataString = 'decrypt='+ decrypt + '&key=' + key + '&cipher=' +cipher+ '&mode= '+mode; 
        $.ajax({ 
            type: "post", 
            url: "main.php?action=decrypt", 
            data: dataString, 
            success: function(data) { 
                $("#words").html(data);
            } 
        }); 
    });
</script>